<template>
  <div class="keyboard" :style="{fontSize:(size || 16) +'px'}">
    <div :class="['key',computedSizeClass(key.size),computedPressClass(index)]"
         v-for="(key,index) in keyList" :key="index" :id="key.code">
      {{ key.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, defineEmits, defineProps, watch} from "vue";
import useKeyboard from "@/hooks/useKeyboard";
import {KeyboardEventConfig, KeyboardEventMode} from "@/ts/keyboard";


// 引入键盘事件hook
let {activeIndex,start,keyList,getKeyName,getIndex} = useKeyboard()


let props=defineProps<{
  size?:number
  activeKeys?:Array<string>
  config:KeyboardEventConfig
}>()
const kbConfig:KeyboardEventConfig=props.config || {
  mode: KeyboardEventMode.ALL
}
// 启动键盘监听
start(kbConfig)
// 把props的[键名string]数组activeKeys转换成[键索引number]数组
let activeKeyIndexList=computed(()=>{
  let lst:Array<number>=[]
  props.activeKeys?.forEach((item)=>{
     lst.push(getIndex(item))
  })
  return lst
})

const emits=defineEmits(['change'])

// 检测激活按键索引
watch(activeIndex,(newV)=>{
  if(newV > 0){
    emits("change",getKeyName(newV))
  }

})
// 计算按键大小
let computedSizeClass = computed(() => {

  return (size: number) => {
    return 's' + size
  }
})

// 按下相应按键时的class
let computedPressClass = computed(() => {

  return (index: number) => {
    // 优先指定激活键，键索引数组里包含该index
    if(props.activeKeys && activeKeyIndexList.value.includes(index)){
      return 'pressed'
    }
    // 一般判断
    return activeIndex.value === index ? 'pressed' : ''
  }
})



</script>


<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.keyboard {
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(30, 1.9em);
  grid-template-rows: repeat(5, 4.75em);
  grid-gap: 0.95em;
  padding: 1.727272727272727em;
  border-radius: 1.266666666666667em;
  background: #d8dee8;

  box-shadow: -0.316666666666667em -0.316666666666667em 0.95em #f3f5f8, 0.316666666666667em 0.316666666666667em 0.633333333333333em #c2ccdb;
}

.keyboard .key {
  border-radius: 0.76em;
  grid-column: auto/span 2;
  width: 100%;
  height: 100%;
  padding: 0.475em;
  font-size: 1.9em;
  display: grid;
  align-items: center;
  color: #8a94a4;
  justify-content: center;
  cursor: pointer;
  //background: #d8dee8;
  border: 1px solid var(--theme-color);
  //box-shadow: -0.316666666666667em -0.316666666666667em 0.95em #f3f5f8, 0.316666666666667em 0.316666666666667em 0.633333333333333em #c2ccdb;
  transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
  user-select: none;
}

.keyboard .key:hover,
.keyboard .key.pressed {
  //transform: perspective(300px) scale(0.97);
  //box-shadow: inset -0.316666666666667em -0.316666666666667em 0.95em -0.158333333333333em #f6f8fa, inset 0.316666666666667em 0.316666666666667em 0.633333333333333em #c2ccdb;
  //color: #fff;
  //text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
  background-color: var(--theme-color);
  color: whitesmoke;
  border: 2px solid var(--theme-color);
}

.keyboard .key.dotted {
  position: relative;
}

.keyboard .key.dotted::before {
  content: '_';
  font-weight: bold;
  color: #b5c0d2;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.keyboard .key.s2 {
  font-size: 1.727272727272727em;
  grid-column: auto/span 2;
}

.keyboard .key.s3 {
  font-size: 1.727272727272727em;
  grid-column: auto/span 3;
}

.keyboard .key.s4 {
  font-size: 1.727272727272727em;
  grid-column: auto/span 4;
}

.keyboard .key.s5 {
  font-size: 1.727272727272727em;
  grid-column: auto/span 5;
}

.keyboard .key.s6 {
  font-size: 1.727272727272727em;
  grid-column: auto/span 6;
}

.keyboard .key.s12 {
  font-size: 1.727272727272727em;
  grid-column: auto/span 12;
}



//@import url("https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Sen', sans-serif;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  //background: radial-gradient(circle at top left, #d8dee8 30%, #c2ccdb);
}


</style>